<script>
import tool from "../tool/tool";

    export default {
      data() {
        return {
          count: 0,
          itemr1: [],
      itemr2: [],
      UserInfo: '',
      UserInfo_url: '',
      UserName: '',
      Height:'',
      Width:"",
      zhuangtai:1,
      Avatar:"http://110.42.188.221:8989/profile/avatar/2022/09/04/blob_20220904233610A020.png",
      schoolscenery:true,
      screenWith:0
        }
      },
      methods:{

        info:function(){
      console.log("执行")
      tool.$request("GET","/userInfo").then(res=>{
      console.log(res.data)
      this.Avatar = this.$Fcee_url.url+ res.data.Avatar
      console.log("头像地址"+this.UserInfo_url)
      this.UserName = res.data.username;
      console.log(this.UserName)
  })
    },
   
      gohome(){
      this.$router.replace("/");
    }
    ,
    tiaotiao() {
      this.$router.replace("/yonghu");
    },
    getone() {
      this.$router.replace("/moni");
    },
    gettwo() {
      this.$router.replace("/zhuanjia");
    },
    getthree() {
      this.$router.replace("/zhuanye");
    },
    showlSubmenu:function(){
      let width = tool.$getWindowWidth();
      console.log("获取宽度为"+width)
      if(width>0&&width<700){
        return  true
      }
      // else{
      //   return true
      // }
    },
    showMenuitem(){
      let width = tool.$getWindowWidth();
      if(width>700){
        console.log("test"+width)
        return true
      }
    }
      },
      onload(){
        
      },
      created(){
        this.info();
      }
    }

</script> 
<style>
@import '../../style/index.css';
</style>   
<template>
<!-- 
    <div class="row1">
      <el-row>
        
        <el-col :span="12">
           -->

           <el-aside width="100%" height="10vh"  >              
            <el-menu class="el-menu-demo" mode="horizontal" background-color="white">
                <el-menu-item v-if="showMenuitem()" index="1" @click="gohome()">主页</el-menu-item>
                <el-menu-item v-if="showMenuitem()" index="3" @click="gettwo()">院校查询</el-menu-item>
                <el-menu-item v-if="showMenuitem()" index="4" @click="getthree()">专业查询</el-menu-item>
                <el-menu-item v-if="showMenuitem()" index="2" @click="getone()">模拟填报</el-menu-item>
                <el-menu-item v-if="showMenuitem()" index="5">关于我们</el-menu-item>
                <el-submenu index="2" class="menuF" v-if="showlSubmenu()">
                  <template slot="title">菜单</template>
                  <el-menu-item index="2-1" @click="tiaotiao()" style="height: 40px;">  
                  <div>
                       <el-avatar :size="40" :src="Avatar">
                    <span class="yonghuname">{{ UserName }}</span>
                  </el-avatar>
                  </div>
                  </el-menu-item>
                  <el-menu-item index="2-2" @click="gohome()">主页</el-menu-item>
                  <el-menu-item index="2-3"  @click="gettwo()">院校查询</el-menu-item>
                  <el-menu-item index="2-4" @click="getthree()">专业查询</el-menu-item>
                  <el-menu-item index="2-5" @click="getone()">模拟填报</el-menu-item>
                    </el-submenu>
                    
              </el-menu>   
          </el-aside>
          
          
        <!-- </el-col>
        <el-col :span="6">
          <div v-if="showMenuitem()" class="grid-content bg-purple bg-purple1">
            <div class="demo-type" @click="tiaotiao()">
              <el-avatar :size="60" :src="Avatar">
              </el-avatar>
          
              <span class="yonghuname">{{ UserName }}</span>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
 -->
</template>    
<style>
  

  .el-menu-demo{
    height: 7vh;
  }
  .el-menu-item {
      background-color: rgb(255, 255, 255)  !important;
      /* width: 9rem; */
     position: relative;
     top: 0.34rem;
      font-size: 40px !important;
    
  }
  .el-aside {
      color: rgb(255, 248, 248);
  }


  .el-menu-item:hover{
    outline: 0 !important;
    color: #409EFF !important;
}
.el-menu-item.is-active {
    color: #fff !important;
    background: #409EFF !important;
}

.el-submenu__title:focus, .el-submenu__title:hover{
    outline: 0 !important;
    color: #409EFF !important;
    background: none !important;
}
</style>
<style scoped>
 .el-menu-item:hover{
    outline: 0 !important;
    color: #409EFF !important;
}
 
.el-menu-item:hover{
    outline: 0 !important;
    color: #409EFF !important;
}
 
::v-deep .el-menu-item:hover{
    outline: 0 !important;
    color: #409EFF !important;
}
</style>

